<template>
    <el-col  :style="{height:heightLength+'px'}" class="el-left-menu" :span="3">
        <el-menu  background-color="#324157" text-color="#bfcbd9" :default-active="active" :active="active"  class="el-menu-vertical-demo"  router unique-opened>
            <el-submenu v-for="menuItem in routeList" :key="menuItem.id" :index="menuItem.menuName">
                <template slot="title">
                    <!-- <i :class="menuItem.icon"></i> -->
                    <span>{{menuItem.menuName}}</span>
                </template>
                <el-menu-item  v-for="item in menuItem.childPermissions"  :key="item.menuName"  :index="item.menuUrl" >{{item.menuName}} </el-menu-item>
                <!-- <el-submenu v-for="item in menuItem.childPermissions" :key="item.id" :index="item.menuUrl"  v-if='item.length != 0 '>
                    <template slot="title">
                        <i></i>
                        <span>{{item.menuName}}</span>
                    </template>
                    <el-menu-item  v-for="list in item.childPermissions"  :key="list.menuName"  :index="list.menuUrl">  {{list.menuName}} </el-menu-item>
                </el-submenu> -->
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
var routerList = require('./router-leftBar.js');
export default {
  data () {
    return {
        active:'',
        // routeList:[],   
        routeList:[],
        heightLength:'',
        identify:''                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
    }
  },
  created(){
      // console.log(this.routeList);
      this.heightLength = document.body.scrollHeight ;
  },
  watch: {
        $route(to, from) {
            console.log(to,from)
          if(from.name == 'loginPage'){
                this.active = '/';
          }
          this.identify = sessionStorage.getItem("identify");
          if (this.identify == 1) {
                this.leftPermission();
            } else {
                this.routeList = routerList.default.routerList
            }
        }
    },
  mounted(){
        this.identify = sessionStorage.getItem("identify");
        if (this.identify == 1) {
            this.leftPermission();
        } else {
            this.routeList = routerList.default.routerList
        }
        window.addEventListener('scroll', ()=>{
            let scrollHeight = document.body.scrollHeight;
                this.heightLength =scrollHeight-80
        })
        let active = '/'+ this.$router.currentRoute.path.split('/')[1];
        // console.log(active + '------ test');
        this.active = active;
  },
  methods:{
    leftPermission(){
        let url = CONSTANT.URL.USER.FINDUSERPERMISSIONS;
        let data = {};
        let param = JSON.stringify(data);
        common.requestAjax(url,param,null,(res)=>{
            this.routeList = res.data.bussData;
            let active = '/'+ this.$router.currentRoute.path.split('/')[1];
            //  console.log(active + '------ test');
            this.active = active;
        })
    },
    fresh(x){
        if(x == 1){
            setTimeout(()=> { window.location.reload();}, 1000);
        }
        else{
            this.fresh(x-1);
        }
    },
    handleOpen(key, keyPath) {
       
    },
    handleClose(key, keyPath) {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
    .el-left-menu{
      height:1000px;
      position: fixed;
      left: 0;
      width: 206px;
    }
    .el-menu-vertical-demo{
      height: 100%;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding-top: 0px!important;
    }
    .el-menu-item{
        a{
            display: block;
            color: #bfcbd9;
        }
        &.is-active{
            a{
              color: #21B5CC;
            }
        }
    }
    .el-menu-vertical-demo{
        height: 100%;
        overflow-y: auto;
        padding-bottom: 10%;
        .el-submenu{
            &:last-child{
                margin-bottom: 100px;
            }
        }
        &::-webkit-scrollbar {  
            width: 14px;  
            height: 14px;  
        }  
            
        &::-webkit-scrollbar-track,  
        &::-webkit-scrollbar-thumb {  
            border-radius: 999px;  
            border: 5px solid transparent;  
        }  
            
        &::-webkit-scrollbar-track {  
            box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-thumb {  
            min-height: 20px;  
            background-clip: content-box;  
            box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-corner {  
            background: transparent;  
        }  
    }
    
</style>
